<!doctype html>			<!--申明文档类型： html-->
<html lang="en">		<!--html 根标签  lang:language--en:english--'zh-CN'中文简体-->
	<head>				<!--网页头部-->
		<meta charset="UTF-8">					<!--字符集：UTF-8编码-->
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">			<!--作者-->
		<meta name="Keywords" content="">		<!--关键词-->
		<meta name="Description" content="">	<!--描述-->
		<title>Document</title>					<!--网页标题-->
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{background:#555;font-size:20px;}
			.clearfix:after{
				content:'';
				display:block;
				clear:both;

			}
			.fl{float:left;}
			.fr{float:right;}
			#box{
				width:100px;
				height:100px;
				position: absolute;
				left:500px;
				top:50px;
				background-color: green;

			}




		</style>
	</head>
	<body>										<!--网页主体：结构 可视化区域<-->
		<div id="box">
		</div>
	</body>

	<script>
			var oBall = document.getElementById('box');
			var maxL = window.innerWidth-oBall.offsetWidth;//最大left
			var maxT = window.innerHeight-oBall.offsetHeight;//最大top
			var timer;
			var moveX,moveY;
			oBall.onmousedown = function(e){
				clearInterval(timer);
				e = e || window.event;
				var X = e.clientX;
				var Y = e.clientY;
				var initL = oBall.offsetLeft;
				var initT = oBall.offsetTop;

				document.onmousemove = function(e){
					e = e || window.event;
					moveX = e.clientX - X;//X上一次clientX
					moveY = e.clientY - Y;//Y上一次clientY
					X = e.clientX;
					Y = e.clientY;
					initL +=  moveX; //更新initL
					//限定left范围
					initL = Math.min(initL,maxL);
					initL = Math.max(initL,0);


					initT += moveY; //更新initT
					//限定top范围
					initT = Math.min(initT,maxT);
					initT = Math.max(initT,0);


					oBall.style.left = initL +'px';
					oBall.style.top = initT +'px';

				}
				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;
					var left = oBall.offsetLeft;
					var top = oBall.offsetTop;


					timer = setInterval(function(){
						moveY += 3;
						left += moveX;//X方向的速度
						top += moveY;//Y方向的速度
						if(top>maxT || top<0){
							top =  Math.min(top,maxT);//限定最大值
							top =  Math.max(top,0);//限定最小值
							moveY *= -0.9;//摩擦力
							moveX *= 0.95;//摩擦力
						}
						if(left>=maxL|| left<0){
							left =  Math.min(left,maxL);//限定最大值
							left =  Math.max(left,0);//限定最小值
							moveX *= -0.9;//摩擦力
							moveY *= 0.95;//摩擦力
						}


						if( Math.abs(moveX)<1 ){
							moveX = 0;
						}
						if( Math.abs(moveY)<1){
							moveY = 0;
						}

						if( moveY == 0 && moveX == 0 && top == maxT){
							clearInterval(timer);
						}

						console.log( moveY,moveX);






						oBall.style.left = left+'px';
						oBall.style.top = top+'px';

					},15)

				}

				return false;

			}





	</script>
</html>


